<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单管理-MeetHere</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <script th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/js/popper.min.js}"></script>
    <script th:src="@{/js/bootstrap.js}"></script>
    <script th:src="@{/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/js/jquery.twbsPagination.js}"></script>

    <style type="text/css">
        body{
            background-color: #f5f5f5;
            padding-top: 80px;
        }
        html {
            overflow-y: scroll;
        }
        :root {
            overflow-y: auto;
            overflow-x: hidden;
        }
        :root body {
            position: absolute;
        }
        body {
            width: 100vw;
            overflow: hidden;
        }
    </style>

</head>
<body>
<div th:include="layout/header :: header(user=${session.user},flag=${session.user}!=null,page='order_manage')"></div>

<main class="container">
    <div class="card bg-white rounded shadow">
        <div class="card-header py-3 text-center">
            <h5 class="card-title mb-0">我的订单</h5>
        </div>
        <div class="card-body">
            <ul class="list-group" id="content">

            </ul>
            <div class="d-flex justify-content-center mt-2" id="pagination-demo"></div>

        </div>

    </div>

</main>
<div th:include="layout/footer :: Footer"></div>
<script type="text/javascript">
    // $(document).ready(function () {
    //     getPage(1);
    // });

    $('#pagination-demo').twbsPagination({
        totalPages: [[${total}]],
        visiblePages: 5,
        onPageClick: function (event, page) {
            getPage(page);
        }
    });

    function getPage(page){
        $.ajax({//根据page去后台加载数据
            url : "/getOrderList.do",
            type : "get",
            dataType : "json",
            data : {"page" : page},
            success : function(data) {
                appendHtml(data);//处理数据
                console.log(data);
            }
        });
    }
    function appendHtml(list) {//此函数用于处理后台返回的数据，根据自己需求来实现页面拼接
        let tableShow = '';
        for (let i = 0; i < list.length; i++) {
            tableShow += '<li class="list-group-item px-3 border-0">\n' +
                '                        <div class="d-flex mb-1">\n';
            if(list[i].state == 3){
                tableShow +='<div class="mr-auto">\n' +
                    '                                <small class="text-danger"><span class="glyphicon glyphicon-info-sign"></span>未通过</small>\n' +
                    '                            </div>\n';
            }
            else if(list[i].state == 1){
                tableShow += '<div class="mr-auto">\n' +
                    '                                <small class="text-warning"><span class="glyphicon glyphicon-info-sign"></span>审核中</small>\n' +
                    '                            </div>\n';
            }
            tableShow +=
            '                    <div class="dropdown ml-auto">\n' +
                '                        <a class="text-dark" href="#" data-toggle="dropdown">\n' +
                '                            <span class="glyphicon glyphicon-menu-down"></span>\n' +
                '                        </a>\n' +
                '                        <div class="dropdown-menu">\n' +
                '                            <a class="dropdown-item" href="modifyOrder.do?orderID='+list[i].orderID+'">修改</a>\n' +
                '                            <a class="dropdown-item" href="#" onclick="del('+list[i].orderID+',this)">取消</a>\n' +
                '                        </div>\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '                    <div class="media border-bottom border-gray pb-3">\n' +
                '                        <div class="media-left mr-3">\n';
            // if(list[i].picture == '')
            //     tableShow += '<img src="image.JPG" alt="" height="100px" width="100px">\n';
            // else
            //     tableShow += '<img src="'+list[i].picture+'" alt="" height="100px" width="100px">\n';
            tableShow += '</div>\n' +
                '                        <div class="media-body">\n' +
                '                            <h6>\n' +
                '                                <strong>预约场馆：</strong>\n' +
                '                                <a href="/venue?venueID='+list[i].venueID+'" target="_blank" >'+list[i].venueName+'</a>\n' +
                '                            </h6>\n' +
                '                            <h6 class="d-flex">\n' +
                '                                <p class="font-weight-bold mb-0">预约时间：</p>\n' +
                '                                <p class="mb-0">'+list[i].startTime+'</p>\n' +
                '                            </h6>\n' +
                '                            <h6 class="d-flex">\n' +
                '                                <p class="font-weight-bold mb-0">预约时长：</p>\n' +
                '                                <p class="mb-0">'+list[i].hours+'</p>\n' +
                '                            </h6>\n' +
                '                            <h6 class="d-flex">\n' +
                '                                <p class="font-weight-bold mb-0">支付租金：</p>\n' +
                '                                <p class="mb-0">￥'+list[i].total+'</p>\n' +
                '                            </h6>\n' +
                '                            <small class="float-right">'+list[i].orderTime+'</small>\n' +
                '                        </div>\n' +
                '                    </div>\n' +
                '                </li>\n';
        }
        $('#content').html(tableShow);
    }
    function del(orderID,btn) {
        if (!confirm("确定删除该订单？")) {
            return;
        }

        $.ajax({
            cache: true,
            type: "POST",
            url: "/delOrder.do",
            dataType: "Json",
            data: {
                orderID:orderID
            },
            async: false,
            success: function (result) {
                if (result) {
                    $(btn).parent().parent().parent().parent().fadeOut();
                    alert("删除成功！");
                }
            }
        });
    }
</script>

</body>
</html>